<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入门</title>
    <script src="../lib/vue2.5.15.js"></script>

</head>
<body>
<div id="app">
    <div class="vue-wrapper">
        <div class="content">
            <!--v-model指令，msg的数据会随输入框的改变而变化-->
            <p>1、数据的双向绑定</p>
            <input type="text" v-model="msg">
            <p class="content">{{msg}}</p>
            <p>2、使用v-html将数据解析成html标签</p>
            <p class="content" v-html="htxt"></p>
            <p>3、使用v-bind强制性的数据绑定</p>
            <img :src="imgUrl" width="100px" height="100px">
            <p>4、事件绑定</p>
            <input type="button" @click="clickMe" value="点我">
        </div>
    </div>
</div>
</body>
<script>
    // 新建实例
    var app = new Vue(
        {
            // vue实例所要控制的元素
            el:"#app",
            data:{
                msg:"测试",
                htxt:"<a href='http://www.baidu.com'> 连接 </a>",
                imgUrl:"https://cn.vuejs.org/images/logo.png"
            },
            methods:{
                //定义一个函数的标准写法
                clickMe:function () {
                    alert("456")
                },
                //es6语法中定义一个函数
                test(){
                    alert("789486")
                }
            }
        }
    )
</script>
</html>